{% extends "/Wap/layout.html.twig" %}
 {% block body %}
     <div id="Page" class="recharge">
         <div class="recharge-title">充值金额</div>
         <div class="recharge-main">
{#             {{ dump(moneySet) }}#}
             {% for item in moneySet %}
                 <div class="recharge-item " :class="money == {{ item[0] }}?'active':''" @click="setPay({{ item[0] }})">
                     <div class="recharge-item-title"><span>{{ item[1] }}</span>积分</div>
                     <div class="recharge-price">¥{{ item[0] }}</div>
                 </div>
             {% endfor %}
{#             <div class="recharge-item active">#}
{#                 <div class="recharge-item-title"><span>10</span>积分</div>#}
{#                 <div class="recharge-price">¥100</div>#}
{#             </div>#}
{#             <div class="recharge-item">#}
{#                 <div class="recharge-item-title"><span>10</span>积分</div>#}
{#                 <div class="recharge-price">¥100</div>#}
{#             </div>#}
{#             <div class="recharge-item">#}
{#                 <div class="recharge-item-title"><span>10</span>积分</div>#}
{#                 <div class="recharge-price">¥100</div>#}
{#             </div>#}
         </div>
         <div class="recharge-btn" @click="createOrder()">充值</div>
     </div>
 {% endblock %}

{% block js %}

    <script>

        $(function () {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: '{{ jsapi_param.appId }}', // 必填，公众号的唯一标识
                timestamp: {{ jsapi_param.timestamp }} , // 必填，生成签名的时间戳
                nonceStr: '{{ jsapi_param.noncestr }}', // 必填，生成签名的随机串
                signature: '{{ jsapi_param.signature }}',// 必填，签名
                jsApiList: ["chooseWXPay","onMenuShareTimeline","onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
            });


            var Page = createVM("#Page",{
                //页面数据
                form:{}
                ,money:0

            },{
                //页面方法
                "init":function () {
                },
                setPay:function (money) {
                    this.money = money
                },
                createOrder: function () {
                    apiGet("/app/pay/insuer",{money:this.money},function (res,code) {
                        console.log(res)
                        console.log(code)
                        var param =res.data;
                        wx.chooseWXPay({
                            timestamp:  param.timeStamp , // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr:   param.nonceStr , // 支付签名随机串，不长于 32 位
                            package:    param.package , // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                            signType:   param.signType , // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign:    param.paySign , // 支付签名
                            success: function (res) {
                                // 支付成功后的回调函数
//                            console.log(res)
//                            alert(res.errMsg)
                                if (res.errMsg == "chooseWXPay:ok") {
                                    showToast("支付成功");
                                    setTimeout(function () {
                                    },1000);
                                }else {

                                }
                            }
                        });

                    })
                }

            })
            Page.init()
        })

        function f() {
            apiGet("/wap/order/pay",data,function (res,code) {
                console.log(res);

                if (code != 1 ) {
                    showToast(res.message)
                    return false
                }
                var param =res.d;
                wx.chooseWXPay({
                    timestamp:  param.timeStamp , // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr:   param.nonceStr , // 支付签名随机串，不长于 32 位
                    package:    param.package , // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                    signType:   param.signType , // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign:    param.paySign , // 支付签名
                    success: function (res) {
                        // 支付成功后的回调函数
//                            console.log(res)
//                            alert(res.errMsg)
                        if (res.errMsg == "chooseWXPay:ok") {
                            showToast("支付成功");
                            setTimeout(function () {
                            },1000);
                        }else {

                        }
                    }
                });
            })
        }



    </script>

{% endblock %}

    {% block css %}
        <style>
            #Page{
                padding: 0!important;
            }
            .recharge-btn{
                width: 90%;
                text-align: center;
                color: #fff;
                background-color: #30a9ff;
                font-size: 16px;
                padding: 10px 0;
                border-radius: 5px;
                position: absolute;
                left: 5%;
                bottom: 30px;
            }
            .recharge-title{
                font-size: 18px;
                padding: 10px;
            }
            .recharge-main{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            .recharge-item{
                width: 30%;
                text-align: center;
                margin: 10px auto;
                padding: 10px;
                border: 1px solid #d1d1d1;
                border-radius: 10px;
            }
            .recharge-item-title{
                font-size: 14px;
            }
            .recharge-item-title span{
                font-size: 18px;
                margin-right: 10px;
            }
            .recharge-price{
                font-size: 12px;
                padding: 5px 0px;
                /*width: 80px;*/
                text-align: center;
                color: #fff;
                background-color: #30a9ff;
                border-radius: 50px;
                margin: 40px auto 0 auto;
            }
            .active{
                border: 1px solid #30a9ff;
                background-color: #d9eefd;
            }
        </style>

    {% endblock %}